<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/放大镜.css">
</head>
<body>
	
	<!-- 左侧放大镜容器 -->
	<div class="container">
		<div class="small"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="../images/timg.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="big">
		<!-- 大图图片 -->
		<img src="../images/timg.jpg" alt="">
    </div>
    
    <div class="choice-btn">
        <img src="../images/timg.jpg" alt="">
        <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
</div>

</body>
<script>
    function Glass() {
        this.small = document.querySelector('.wrap');
        this.grayBox = document.querySelector('.grayBox');
        this.big = document.querySelector('.big');
        this.bigImg = document.querySelector('.big img');
        this.btns = document.querySelectorAll('.choice-btn img');
        this.smallImg = document.querySelector('.small img');

        this.grayBoxSize = {
            width: parseInt(getComputedStyle(this.grayBox).width),
            height: parseInt(getComputedStyle(this.grayBox).height)
        }

        this.smallSize = {
            width: parseInt(getComputedStyle(this.small).width),
            height: parseInt(getComputedStyle(this.small).height)
        }

        this.bigImgSize = {
            width: parseInt(getComputedStyle(this.bigImg).width),
            height: parseInt(getComputedStyle(this.bigImg).height)
        }

        this.bindEvent(); 
    }

    Glass.prototype.bindEvent = function () {
        let that = this;

        this.small.onmouseover = function () {
            that.grayBox.style.display = 'block';
            that.big.style.display = 'block';
        }

        this.small.onmouseout = function () {
            that.grayBox.style.display = 'none';
            that.big.style.display = 'none';
        }

        this.small.onmousemove = function (e) {
            e = e || window.event;
            let Left = e.offsetX - that.grayBoxSize.width / 2;
            let Top = e.offsetY - that.grayBoxSize.height / 2;

            if (Left < 0) {
                Left = 0;
            } else if (Left > that.smallSize.width - that.grayBoxSize.width) {
                Left = that.smallSize.width - that.grayBoxSize.width;
            }

            if (Top < 0) {
                Top = 0;
            } else if (Top > that.smallSize.height - that.grayBoxSize.height) {
                Top = that.smallSize.height - that.grayBoxSize.height;
            }

            that.grayBox.style.left = Left + 'px';
            that.grayBox.style.top = Top + 'px';
            that.bigImg.style.left = - Left * that.bigImgSize.width / that.smallSize.width + 'px';
            that.bigImg.style.top = - Top * that.bigImgSize.height / that.smallSize.height + 'px';
  
        }

        for (let i = 0; i < this.btns.length; i++) {
                this.btns[i].onmouseover = function () {
                    that.smallImg.src = this.src;
                    that.bigImg.src = this.src;
                }
            }
    }

    let a = new Glass();
</script>
</html>